<template>
  <div class="main">
    <div class="header">
          <!-- 信息公告 -->
    <el-dialog
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="closeTime">
  <el-form :model="ruleForm" ref="ruleForm">
    <el-form-item label="描述" prop="title">
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>
  <el-form-item label="公告内容" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-button type="primary" @click="submitForm"  plain>提交</el-button>
  </el-form>
</el-dialog>
          <div class="header-l">
            <el-button @click="openAdd" size="mini" type="primary">添加</el-button>
          </div>
          <div class="header-r" style="dispaly:flex;width:288px">
            <el-input placeholder="请输入标题关键字搜索" v-model="serchVal" size="mini" style="width:188px;margin-right:8px">111</el-input>
            <el-button style="border:1px solid purple;color:#fff;background:skyblue" @click="searchFun" size="mini">搜索</el-button>
          </div>
    </div>
    <div class="body">
      <el-table
    :data="tableData"
    style="width: 100%"
    height="498">
    <el-table-column
      fixed
      label="发布时间"
      width="180">
      <template slot-scope="scope">
        <span>{{scope.row.c_time}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="公告标题"
      width="320">
      <template slot-scope="scope">
        <span v-if="!isEdit||editId!==scope.row.c_id">{{scope.row.c_title}}</span>
        <el-input v-else v-model="newTitle"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop=""
      label="公告内容"
      width="380">
      <template slot-scope="scope">
        <span v-if="!isEdit||editId!==scope.row.c_id">{{scope.row.c_content}}</span>
        <el-input v-else v-model="newContent"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="是否显示"
      width="80">
      <template slot-scope="scope">
        <el-switch
        :value="scope.row.c_status===1"
        @change="changeStatus(scope.row)"
        active-color="#13ce66"
        inactive-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      prop="zip"
      label="操作">
      <template slot-scope="scope">
        <el-button v-if="!isEdit||editId!==scope.row.c_id" @click="makeEdit(scope.row)" type="text" size="mini">修改</el-button>
        <el-button v-if="isEdit&&editId===scope.row.c_id" @click="makeSave(scope.row)" type="text" size="mini">保存</el-button>
        <el-button v-if="isEdit&&editId===scope.row.c_id" @click="makeCancel()" type="text" size="mini">取消</el-button>
        <el-button @click="makeDelete(scope.row)" type="text" size="mini">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <div class="footer" style="position:fixed;right:0;bottom:0">
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>
<script>
import { getOpenInfo, editOpenInfo, deleteOpenInfo, addOpenInfo } from '../api/info'
export default {
  data () {
    return {
      dialogVisible: false,
      // 公告添加
      ruleForm: {
        title: '',
        desc: ''
      },
      // 搜索内容
      serchVal: '',
      // 当前页
      currentPage: 1,
      total: 0,
      // 新标题
      newTitle: '',
      // 新内容
      newContent: '',
      // 是否修改
      isEdit: false,
      // 修改的id
      editId: '',
      tableData: []
    }
  },
  methods: {
    // 关闭视图
    closeTime () {
      this.ruleForm.title = ''
      this.ruleForm.desc = ''
      this.dialogVisible = false
    },
    // 打开添加视图
    openAdd () {
      this.dialogVisible = true
    },
    // 提交添加
    submitForm () {
      if (!this.ruleForm.title || !this.ruleForm.title) {
        return this.$message.info('内容不能为空')
      }
      addOpenInfo(this.ruleForm).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success(data.message)
          this.dialogVisible = false
          this.ruleForm.title = ''
          this.ruleForm.desc = ''
          this.getInfo()
        }
      })
    },
    // 搜索
    searchFun () {
      // console.log(this.serchVal)
      this.currentPage = 1
      this.getInfo()
    },
    // 跳转页码
    handleCurrentChange (val) {
      this.currentPage = val
      this.getInfo()
    },
    // 删除公告
    makeDelete (row) {
      deleteOpenInfo({ c_id: row.c_id }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success('删除成功')
          this.getInfo()
        }
      })
    },
    // 保存修改内容
    makeSave (row) {
      editOpenInfo({ upId: row.c_id, newTitle: this.newTitle, newContent: this.newContent }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success('修改成功')
          this.makeCancel()
          this.getInfo()
        }
      })
    },
    // 取消修改
    makeCancel () {
      this.editId = ''
      this.isEdit = false
    },
    // 修改内容
    makeEdit (row) {
      this.editId = row.c_id
      this.isEdit = true
      this.newContent = row.c_content
      this.newTitle = row.c_title
    },
    // 修改状态
    changeStatus (row) {
      editOpenInfo({ statusId: row.c_id, c_status: row.c_status }).then(({ data }) => {
        if (data.status === 200) {
          this.getInfo()
        }
      })
    },
    // 获取数据
    getInfo () {
      getOpenInfo({ serchVal: this.serchVal, currentPage: this.currentPage }).then(({ data }) => {
        // console.log(data)
        this.tableData = data.arrVal
        this.total = data.total
      })
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>
<style scoped lang="less">
  .header{
    display: flex;
    height: 32px;
    // background: red;
    justify-content: space-between;
    align-items: center;
    /deep/ .el-input__inner{
      background:transparent;
      border:1px solid blue;
    }
  }
  .body{
    /deep/ .el-input__inner{
    font-size:15px;
    padding:0;
    border:0;
    height:19px;
    background:transparent;
  }
  }

</style>
